import { Button } from 'antd-mobile'
import React, { useEffect, useState } from 'react'
import { AntOutline, EnvironmentOutline, RightOutline, LeftOutline } from 'antd-mobile-icons'

import { useNavigate, useSearchParams } from 'react-router-dom'
import stores from '../Redux/store'
import axios from 'axios'
export default function Submitbuy(props) {
    let [a, b] = useSearchParams()
    let history = useNavigate()
    let [shopArr, setshoparr] = useState([])
    let [mess, setmess] = useState("")
    let [messlis, setmesslis] = useState([])

    let getMess = async () => {
        let val = await axios.get("http://127.0.0.1:3000/xuweixin/carshow")
        setmesslis(val.data.datas ? val.data.datas : [])
    }
    useEffect(() => {
        getMess()
    }, [])
    stores.subscribe(() => {

    })
    return (
        <div style={{ width: "100vw", height: "100vh", background: "#f2f2f2" }}>
            <div style={{ width: "100%", height: "261px", background: "linear-gradient(to bottom,#72ba75,#bfdcc0)", border: "1px solid white" }}>
                <div style={{ marginTop: "12px", display: "flex", justifyContent: "space-between" }}>
                    <span
                        style={{
                            marginLeft: "20px",
                            fontSize: "20px",
                            color: "white"
                        }}
                    ><LeftOutline
                        onClick={() => {
                            history("/xumain")
                        }}
                    ></LeftOutline></span>
                    <span
                        style={{ fontSize: "17px", color: "white", marginRight: "153px" }}
                    >提交订单</span>
                </div>

                <div style={{
                    height: "92px",
                    background: "white",
                    width: "93%",
                    borderRadius: "10px",
                    margin: "0 auto",
                    marginTop: "20px",
                    lineHeight: "92px",
                }}>
                    <p style={{ display: 'flex', justifyContent: "space-around" }}>
                        <span style={{ fontSize: "18px" }}><EnvironmentOutline /></span>
                        {
                            JSON.parse(localStorage.getItem("addresslis")).filter(item => { return item.selecteds === true && item._id == JSON.parse(localStorage.getItem("adminmess"))._id }).length == 0
                                ?
                                <span style={{ fontSize: "15px", marginRight: "101px" }}>暂无地址,请设置收货地址</span>
                                :
                                <p style={{ lineHeight: "24px", position: "relative", top: "20px", right: "44px" }}>
                                    <span>
                                        <b>{JSON.parse(localStorage.getItem("addresslis")).find(item => item.selecteds === true && item._id == JSON.parse(localStorage.getItem("adminmess"))._id).username}</b>
                                        <span style={{ marginLeft: "10px" }}>{<b>{JSON.parse(localStorage.getItem("addresslis")).find(item => item.selecteds === true).phone}</b>}</span>
                                    </span>
                                    <br></br>
                                    <span style={{ fontSize: "13px" }}>
                                        {<span>{JSON.parse(localStorage.getItem("addresslis")).find(item => item.selecteds === true && item._id == JSON.parse(localStorage.getItem("adminmess"))._id).address.replace(",", "")}
                                            {JSON.parse(localStorage.getItem("addresslis")).find(item => item.selecteds === true && item._id == JSON.parse(localStorage.getItem("adminmess"))._id).home}
                                            {JSON.parse(localStorage.getItem("addresslis")).find(item => item.selecteds === true && item._id == JSON.parse(localStorage.getItem("adminmess"))._id).homenum}
                                        </span>}
                                    </span>
                                </p>
                        }
                        <span
                            onClick={() => {
                                history("/addressoptions")
                            }}
                            style={{ fontSize: "15px" }}><RightOutline /></span>
                    </p>
                </div>

                <div style={{ width: "93%", background: "white", borderRadius: "10px", height: "140px", margin: "0 auto", marginTop: "20px", border: "1px solid white" }}>
                    <p style={{ display: 'flex', justifyContent: "space-between", marginTop: "7px" }}>
                        <span style={{ marginLeft: "20px" }}>发货时间</span>
                        <span style={{ marginRight: "20px" }}>3天内</span>
                    </p>

                    <div style={{ height: "calc(100% - 27px)", display: 'flex', justifyContent: "space-between" }}>
                        <p style={{ width: "213px", overflowX: "auto", display: 'flex' }}>
                            {
                                messlis.filter(item => item.flag === true && item.uid == JSON.parse(localStorage.getItem("adminmess"))._id).map(items => (
                                    <img
                                        key={items._id}
                                        src={items.img} style={{ width: "80px", height: "80px", marginTop: "18px", marginLeft: "12px", marginRight: "10px" }}></img>
                                ))
                            }
                        </p>
                        <p style={{ lineHeight: "173.67px", marginRight: "9px" }}>
                            共{messlis.filter(item => item.flag == true && item.uid == JSON.parse(localStorage.getItem("adminmess"))._id).reduce((sum, item) => { return sum += item.buynum }, 0)}件
                        </p>

                    </div>
                </div>
            </div>

            {/* 价格明细 */}
            <div style={{ width: "93%", borderRadius: "10px", margin: "0 auto", marginTop: "56px", height: "200px", background: "white" }}>
                <div style={{ height: "40px", borderBottom: "1px solid #f2f2f2", lineHeight: "40px" }}>
                    <span style={{ marginLeft: "20px" }}>价格明细</span>
                </div>
                <div style={{ height: "40px", lineHeight: "40px", display: "flex", justifyContent: "space-between" }}>
                    <span style={{ marginLeft: "20px" }}>商品金额</span>
                    <span style={{ marginRight: "20px" }}>￥{messlis.filter(item => item.flag == true && item.uid == JSON.parse(localStorage.getItem("adminmess"))._id).reduce((sum, item) => { return sum += Number(item.price * item.buynum) }, 0).toFixed(2)}</span>
                </div>
                <div style={{ height: "40px", lineHeight: "40px", display: 'flex', justifyContent: "space-between" }}>
                    <span style={{ marginLeft: "20px" }}>配送费</span>
                    <span style={{ marginRight: "20px" }}>包邮</span>
                </div>
                <div style={{ height: "40px", lineHeight: "40px" }}>
                    <span style={{ marginLeft: "20px" }}>优惠卷</span>
                    <span style={{ marginLeft: "193px" }}>共0张，0张可用<RightOutline></RightOutline></span>
                </div>
                <div style={{ height: "40px", lineHeight: "40px", borderTop: "1px solid #f2f2f2" }}>
                    <p style={{ textAlign: "right", marginRight: "10px" }}>
                        <span>小计:</span>
                        <span style={{ color: "#fe4545" }}>￥{messlis.filter(item => item.flag == true && item.uid == JSON.parse(localStorage.getItem("adminmess"))._id).reduce((sum, item) => { return sum += Number(item.price * item.buynum) }, 0).toFixed(2)}</span>
                    </p>
                </div>
            </div>

            {/* 安心保障 */}
            <div style={{ width: "93%", height: "199px", background: "white", margin: "0 auto", marginTop: "14px", borderRadius: "10px" }}>
                <div style={{ height: "45px", lineHeight: "45px", borderBottom: "1px solid #f2f2f2" }}>
                    <span style={{ marginLeft: "20px" }}>安心保障</span>
                </div>
                <div style={{ height: "75px", background: "", padding: "20px", boxSizing: "border-box" }}>
                    <p style={{}}><span style={{ marginLeft: "-8px" }}>图标</span><b style={{ marginLeft: "10px" }}>严重退款</b></p>
                    <p style={{ marginLeft: "26px", marginTop: "7px" }}><span style={{}}>如商品实际重量不足，按确重比例自动退款</span></p>
                </div>

                <div style={{ height: "75px", background: "", padding: "20px", boxSizing: "border-box" }}>
                    <p style={{}}><span style={{ marginLeft: "-8px" }}>图标</span><b style={{ marginLeft: "10px" }}>超时补偿</b></p>
                    <p style={{ marginLeft: "26px", marginTop: "7px" }}><span style={{}}>超时10分钟赠送100积分</span></p>
                </div>
            </div>

            {/* 结算 */}
            <div style={{
                height: "88px", marginTop: "20px", background: "white", position: "sticky",
                display: "flex", justifyContent: "space-between"
            }}>
                <p style={{ marginLeft: "20px", fontSize: "17px", color: "#fe4545", marginTop: "29px" }}>￥{messlis.filter(item => item.flag == true && item.uid == JSON.parse(localStorage.getItem("adminmess"))._id).reduce((sum, item) => { return sum += Number(item.price * item.buynum) }, 0).toFixed(2)}</p>
                <p style={{ marginTop: "20px", marginRight: "20px" }}>
                    <Button
                        onClick={async () => {
                            history("/showding")
                            let newmess = messlis.filter(item => item.flag === true && item.uid == JSON.parse(localStorage.getItem("adminmess"))._id)
                            let obj = {
                                order_id: "XY" + Date.now(),
                                order_price: newmess.reduce((sum, item) => { return sum += item.price * item.buynum }, 0),
                                order_img: newmess.map(item => { return item.img }),
                                order_time: new Date().toLocaleString(),
                                order_status: 1,
                                order_address: JSON.parse(localStorage.getItem("addresslis")).find(item => item.selecteds === true && item._id == JSON.parse(localStorage.getItem("adminmess"))._id).address + JSON.parse(localStorage.getItem("addresslis")).find(item => item.selecteds === true && item._id == JSON.parse(localStorage.getItem("adminmess"))._id).home.replace(",", ""),
                                order_phone: JSON.parse(localStorage.getItem("addresslis")).find(item => item.selecteds === true && item._id == JSON.parse(localStorage.getItem("adminmess"))._id).phone,
                                userid: JSON.parse(localStorage.getItem("adminmess"))._id,
                                shopArr: stores.getState().lis
                            }
                            
                            localStorage.setItem("order_id",JSON.stringify(obj.order_id))
                            let val = await axios.post("http://127.0.0.1:3000/xuweixin/orderadd",{obj})
                            
                            if(val.data.code==200){
                                let delval=await axios.post("http://127.0.0.1:3000/xuweixin/delcar",{idlis:newmess.map(items=>{return items._id})})
                                console.log(delval)
                            }

                        }}
                        style={{ background: JSON.parse(localStorage.getItem("addresslis")).filter(item => item.selecteds === true).length == 0 ? "#cccccc" : "#fe4545", color: "white", borderRadius: "20px" }}
                        disabled={JSON.parse(localStorage.getItem("addresslis")).filter(item => item.selecteds === true && item._id == JSON.parse(localStorage.getItem("adminmess"))._id).length == 0}
                    >去结算</Button>
                </p>
            </div>
        </div>
    )
}
